<template>
  <div class="shop">

    <span style="font-size:13px;color:#666666;">收益支出类型：</span>
    <el-select  style="width:140px;"
          size='small'
          v-model="income_type"
          @change="onChangeIncomeType"
          filterable
          class="select"
          placeholder="收益支出类型">
          <el-option label="全部"
          :value="0">全部</el-option>
        <el-option label="收益"
          :value="1"></el-option>
        <el-option label="提现"
          :value="2"></el-option>
    </el-select>

         <span style="margin-left:13px;font-size:13px;color:#666666;">收益类型：</span>
         <el-select  style="width:140px;"
          size='small'
          v-model="type"
          filterable
          @change="onChangeType"
          class="select"
          placeholder="收益类型">
          <el-option label="全部"
          :value="40">全部</el-option>
        <!-- <el-option label="返利"
          :value="0"></el-option>
        <el-option label="分销"
          :value="1"></el-option>
        <el-option label="提现"
          :value="2"></el-option> -->
          <el-option label="服务商服务费"
          :value="35"></el-option>
          <el-option label="小店加盟奖励"
          :value="30"></el-option>
          <el-option label="推荐小店奖励【全返】" :value="32"></el-option>
            <el-option label="服务商邀请奖励"
          :value="25"></el-option>
           <el-option label="淘客订单收益"
          :value="15"></el-option>
           <el-option label="自营订单收益"
          :value="20"></el-option>
        <el-option label="会员费分成"
          :value="10"></el-option>
             <el-option label="优惠买单服务费分润"
          :value="70"></el-option>
          <!-- <el-option label="活动赠送"
          :value="11"></el-option>
          <el-option label="战队排行奖励"
          :value="12"></el-option> -->





    </el-select>
    <el-table :data="tableData"
      style="width:100%;margin:20px 0;"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
    <el-table-column label="时间" prop="create_time"></el-table-column>
    <el-table-column label="收入/支出类型">
       <template slot-scope="scope">
        <p v-if='scope.row.type == 2'>提现</p>
        <p v-else>收入</p>
       </template>
    </el-table-column>
    <el-table-column label="类型明细" prop="type_detail">
      <template slot-scope="scope">
        <p v-if='scope.row.type == 0'>返利</p>
        <p v-if='scope.row.type == 1'>分销</p>
        <p v-if='scope.row.type == 2'>提现</p>
        <p v-if='scope.row.type == 10'>购买会员分润</p>
        <p v-if='scope.row.type == 11'>活动赠送</p>
        <p v-if='scope.row.type == 12'>战队排行奖励</p>
        <p v-if='scope.row.type == 15'>淘客商品</p>
        <p v-if='scope.row.type == 20'>自营商品</p>
        <p v-if='scope.row.type == 25'>推荐服务商奖励</p>
        <p v-if='scope.row.type == 30'>推荐小店奖励</p>
        <p v-if='scope.row.type == 32'>推荐小店奖励【全返】</p>
        <p v-if='scope.row.type == 35'>服务商服务费分成</p>
        <p v-if='scope.row.type == 40'>充值</p>
        <p v-if='scope.row.type == 50'>红包充值返利</p>
        <p v-if='scope.row.type == 55'>红包充值间接返利</p>
        <p v-if='scope.row.type == 60'>会员分成</p>
        <p v-if='scope.row.type == 70'>小店订单服务费</p>
      </template>
    </el-table-column>

    <el-table-column label="订单编号" prop="orderid"></el-table-column>
    <el-table-column label="变动金额">
      <template slot-scope="scope">
           <p v-if="scope.row.money > 0">+¥{{scope.row.money}}</p>
            <p v-if="scope.row.money == 0">{{scope.row.money}}</p>
            <p v-if="scope.row.money < 0">-¥{{0.00-scope.row.money}}</p>
      </template>
    </el-table-column>
    <el-table-column label="状态">
      <template slot-scope="scope">
        <p v-if="scope.row.status ==1 ">已收益</p>
      <p v-if="scope.row.status ==3 ">冻结中</p>
      </template>
    </el-table-column>
    </el-table>

    <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="page"
          :page-size="size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
  </div>
</template>


<script>
// import {serviceIncomesUidSearch} from "@/api/service"
export default {
  data(){
    return{
      serviceId:'',
      page:1,
      size:15,
      total:0,
      tableData:[],
      income_type:0,
      type:40,
    }
  },
  mounted(){
    this.serviceId = this.$route.query.serviceId;
    if(this.serviceId){
      this.getserviceIncomesUidSearchData()
    }
  },
  methods:{
    //分页
    pageChange (page) {
      this.page = page;
      //获取更多数据
      this.getserviceIncomesUidSearchData()
    },
    onChangeIncomeType(){
      this.page = 1;
       this.getserviceIncomesUidSearchData()
    },
    onChangeType(){
      this.page = 1;
       this.getserviceIncomesUidSearchData()
    },
    async getserviceIncomesUidSearchData(){
       var url;
      if(this.income_type == 0 && this.type == 40){
        url =  "page="+this.page
      }else if(this.income_type !== 0 && this.type == 40){
           url = "page="+this.page+
                 "&income_type="+this.income_type
      }else if(this.income_type !== 0 && this.type != 40){
           url = "page="+this.page+
                 "&income_type="+this.income_type+
                "&type="+this.type
      }else if(this.income_type == 0 && this.type !== 40){
            url = "page="+this.page+
                "&type="+this.type
      }


      let res = await serviceIncomesUidSearch(this.serviceId,url);
      if(res.code === 10000){
         this.tableData  = res.data.data;
         this.total = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>
<style lang="scss" scoped>
.shop{
  padding: 20px;
  .pagination{
    float: right;
  }
}
</style>
